<template>
    <div class="min-h-screen flex overflow-hidden">
        <!-- 左侧栏 - 背景图片 -->
        <div class="hidden lg:flex lg:w-1/2 items-center justify-center p-12 relative bg-cover bg-center bg-no-repeat slide-in-left"
            :style="{ backgroundImage: `url(${bgImage})` }">
            <!-- 深色遮罩层 -->
            <div class="absolute inset-0 bg-gradient-to-br"></div>

            <!-- 内容层 -->
            <div class="text-white text-center w-full max-w-lg relative z-10 fade-in-content">
            </div>
        </div>

        <!-- 右侧栏 - 登录表单 -->
        <div class="w-full lg:w-1/2 bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-8 slide-in-right relative overflow-hidden">
            <!-- 炫酷背景装饰 -->
            <div class="absolute inset-0 overflow-hidden pointer-events-none">
                <!-- 渐变背景 -->
                <div class="absolute inset-0 bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 dark:from-blue-900/20 dark:via-purple-900/20 dark:to-pink-900/20"></div>
                
                <!-- 浮动圆形 1 -->
                <div class="floating-circle floating-circle-1"></div>
                <!-- 浮动圆形 2 -->
                <div class="floating-circle floating-circle-2"></div>
                <!-- 浮动圆形 3 -->
                <div class="floating-circle floating-circle-3"></div>
                
                <!-- 网格背景 -->
                <div class="absolute inset-0 bg-grid-pattern opacity-5"></div>
            </div>
            
            <div class="w-full max-w-md relative z-10">
                <!-- 移动端 Logo -->
                <div class="lg:hidden text-center mb-8">
                    <h1 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-2">
                        犬小哈的博客
                    </h1>
                </div>

                <!-- 登录表单卡片 -->
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 fade-in-card">
                    <div class="mb-8 text-center">
                        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
                            欢迎回来
                        </h2>
                        <p class="text-gray-600 dark:text-gray-400">
                            请登录您的管理员账户
                        </p>
                    </div>

                    <form @submit.prevent="handleLogin" class="space-y-6">
                        <!-- 用户名输入框 -->
                        <div>
                            <label for="username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                用户名
                            </label>
                            <el-input 
                                v-model="loginForm.username" 
                                placeholder="请输入用户名" 
                                size="large" 
                                :prefix-icon="User"
                                :class="{ 'error-input': errors.username }"
                                @input="clearError('username')"
                                clearable />
                            <transition name="fade">
                                <p v-if="errors.username" class="mt-1 text-sm text-red-600 dark:text-red-400">
                                    {{ errors.username }}
                                </p>
                            </transition>
                        </div>

                        <!-- 密码输入框 -->
                        <div>
                            <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                密码
                            </label>
                            <el-input 
                                v-model="loginForm.password" 
                                type="password" 
                                placeholder="请输入密码" 
                                size="large"
                                :prefix-icon="Lock" 
                                :class="{ 'error-input': errors.password }"
                                @input="clearError('password')"
                                show-password 
                                clearable />
                            <transition name="fade">
                                <p v-if="errors.password" class="mt-1 text-sm text-red-600 dark:text-red-400">
                                    {{ errors.password }}
                                </p>
                            </transition>
                        </div>

                        <!-- 记住我和忘记密码 -->
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <input id="remember" type="checkbox"
                                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
                                <label for="remember" class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                                    记住我
                                </label>
                            </div>
                            <a href="#"
                                class="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
                                忘记密码？
                            </a>
                        </div>

                        <!-- 登录按钮 -->
                        <button type="submit" :disabled="loading"
                            class="w-full text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-3 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2">
                            <span v-if="loading" class="inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
                            <span>{{ loading ? '登录中...' : '登录' }}</span>
                        </button>

                        <!-- 返回首页 -->
                        <div class="text-center pt-4">
                            <a @click="$router.push('/')"
                                class="text-sm text-gray-600 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 cursor-pointer transition-colors">
                                ← 返回首页
                            </a>
                        </div>
                    </form>
                </div>

                <!-- 底部提示 -->
                <p class="text-center text-sm text-gray-500 dark:text-gray-400 mt-8">
                    © 2025 黄志明的博客. All rights reserved.
                </p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage, ElLoading } from 'element-plus'
import { login } from '@/api/auth'
import { useUserStore } from '@/stores/userStore'

// 导入背景图片
const getImageUrl = () => {
    return new URL('../../assets/images/programmer.png', import.meta.url).href
}
const bgImage = getImageUrl()

const router = useRouter()
const userStore = useUserStore()

// 登录表单数据
const loginForm = reactive({
    username: '',
    password: '',
})

// loading状态
const loading = ref(false)

// 错误信息
const errors = reactive({
    username: '',
    password: '',
})

// 清除错误信息
const clearError = (field) => {
    errors[field] = ''
}

// 清除所有错误
const clearAllErrors = () => {
    errors.username = ''
    errors.password = ''
}

// 表单验证
const validateForm = () => {
    clearAllErrors()
    let isValid = true

    // 验证用户名
    if (!loginForm.username) {
        errors.username = '请输入用户名'
        isValid = false
    } else if (loginForm.username.length < 3) {
        errors.username = '用户名长度不能少于3位'
        isValid = false
    }

    // 验证密码
    if (!loginForm.password) {
        errors.password = '请输入密码'
        isValid = false
    } else if (loginForm.password.length < 6) {
        errors.password = '密码长度不能少于6位'
        isValid = false
    }

    return isValid
}

// 处理登录
const handleLogin = async () => {
    // 防止重复提交
    if (loading.value) {
        console.log('正在登录中，请勿重复提交')
        return
    }

    // 表单验证
    if (!validateForm()) {
        return
    }

    // 设置loading状态，防止重复提交
    loading.value = true

    // 创建全屏loading
    const loadingInstance = ElLoading.service({
        lock: true,
        text: '登录中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })

    try {
        const res = await login(loginForm)
        
        // 登录成功
        if (res.success) {
            ElMessage.success('登录成功！')
            
            // 使用Pinia Store保存token和用户名（自动持久化到localStorage）
            if (res.data) {
                userStore.login(res.data, loginForm.username)
            }
            
            // 延迟跳转，让用户看到成功提示
            setTimeout(async () => {
                router.push('/admin/index')
            }, 100)
        } else {
            ElMessage.error(res.message || '登录失败，请检查用户名或密码')
        }
    } catch (error) {
        ElMessage.error(error)
    } finally {
        // 关闭loading
        loadingInstance.close()
        loading.value = false
    }
}
</script>

<style scoped>
/* 错误提示淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-enter-from {
    opacity: 0;
    transform: translateY(-10px);
}

.fade-leave-to {
    opacity: 0;
    transform: translateY(-10px);
}

/* 错误输入框样式 */
.error-input :deep(.el-input__wrapper) {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2) !important;
}

.error-input :deep(.el-input__wrapper:hover) {
    border-color: #dc2626 !important;
}

.error-input :deep(.el-input__wrapper.is-focus) {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* 深色模式下的错误样式 */
.dark .error-input :deep(.el-input__wrapper) {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.2) !important;
}

/* 抽屉式动画效果 - 左侧从左边滑入 */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 抽屉式动画效果 - 右侧从右边滑入 */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 内容淡入动画 */
@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 卡片淡入放大动画 */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 应用动画 */
.slide-in-left {
    animation: slideInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide-in-right {
    animation: slideInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fade-in-content {
    animation: fadeInContent 1s ease-out 0.5s forwards;
    opacity: 0;
}

.fade-in-card {
    animation: fadeInScale 0.6s ease-out 0.4s forwards;
    opacity: 0;
}

/* 完全去除 Element Plus 输入框的 box-shadow，使用 border 替代 */
:deep(.el-input__wrapper) {
    box-shadow: none !important;
    border: 1px solid #dcdfe6 !important;
    transition: border-color 0.2s;
}

:deep(.el-input__wrapper:hover) {
    border-color: #c0c4cc !important;
}

:deep(.el-input__wrapper.is-focus) {
    border-color: #409eff !important;
}

/* 深色模式适配 */
.dark :deep(.el-input__wrapper) {
    border-color: #4c4d4f !important;
    background-color: #374151 !important;
}

.dark :deep(.el-input__wrapper:hover) {
    border-color: #606266 !important;
}

.dark :deep(.el-input__wrapper.is-focus) {
    border-color: #409eff !important;
}

/* ========== 炫酷背景效果 ========== */

/* 浮动圆形基础样式 */
.floating-circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.15));
    backdrop-filter: blur(60px);
    animation: float 20s ease-in-out infinite;
}

/* 第一个浮动圆形 - 大 */
.floating-circle-1 {
    width: 400px;
    height: 400px;
    top: -100px;
    right: -100px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(147, 51, 234, 0.2));
    animation: float 15s ease-in-out infinite, rotate 30s linear infinite;
}

/* 第二个浮动圆形 - 中 */
.floating-circle-2 {
    width: 300px;
    height: 300px;
    bottom: -80px;
    left: -80px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(251, 146, 60, 0.2));
    animation: float 18s ease-in-out infinite 2s, rotate 25s linear infinite reverse;
}

/* 第三个浮动圆形 - 小 */
.floating-circle-3 {
    width: 200px;
    height: 200px;
    top: 50%;
    right: 10%;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(59, 130, 246, 0.15));
    animation: float 12s ease-in-out infinite 1s, pulse 8s ease-in-out infinite;
}

/* 浮动动画 */
@keyframes float {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(30px, -30px);
    }
    50% {
        transform: translate(-20px, 20px);
    }
    75% {
        transform: translate(20px, 30px);
    }
}

/* 旋转动画 */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 脉冲动画 */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

/* 网格背景 */
.bg-grid-pattern {
    background-image: 
        linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* 深色模式下的网格 */
.dark .bg-grid-pattern {
    background-image: 
        linear-gradient(rgba(147, 197, 253, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(147, 197, 253, 0.03) 1px, transparent 1px);
}

/* 增强表单卡片的视觉效果 */
.fade-in-card {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

/* 深色模式下的卡片效果 */
.dark .fade-in-card {
    background: rgba(31, 41, 55, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
</style>
